<gm:page title="Mashup" css="/css/g.css" class="googleTheme">

    <!--
       The mashup application demonstrates taking a external RSS feed with geo-location
       information and mapping it on a Google Map. Interaction between a list and a map
       is also demonstrated via the handleEvent tag.
       @author: GME Team
    -->


  <div class="gm-app-header">
    <table>
      <tr>
        <td width="300"><h1>Mashup</h1></td>
      </tr>
    </table>
  </div>

  <table width="1000">
    <tr valign="top">
      <td width="300">
        <gm:list id="myList" data="http://pipes.yahoo.com/pipes/pipe.run?_id=WkwacdF43BG_QvmdxAnzeQ&_render=rss" pagesize="20">
          <gm:handleEvent src="myMap" event="select"/>
        </gm:list>
      </td>
      <td class="mainPanel">
        <gm:map id="myMap" height="500px" data="${myList}" latref="geo:lat" lngref="geo:long" infotemplate="detailTemplate">
          <gm:handleEvent src="myList" event="select"/>
        </gm:map>
      </td>
    </tr>    
  </table>
  
<gm:page title="Tabs">

     

   <gm:tabs target="myContainer"/>

    <gm:container id="myContainer" style="width:600px;">
      
      <gm:section id="section1" title="sports">
       <gm:list id="myList1" data="http://pipes.yahoo.com/pipes/pipe.run?_id=HI3SMjZ53BGdsv2cTqoASA&_render=rss" pagesize="10"/>
              </gm:section>

      <gm:section id="section2" title="entertaint">
        <gm:list id="testList" data="${test}"/>
      </gm:section>

      <gm:section id="section3" title="business">
        <gm:list id="myList3" data="http://www.digg.com/rss/index.xml" pagesize="10"/>
      </gm:section>
    
    </gm:container>

</gm:page>


  <gm:template id="detailTemplate">
    <div repeat="true">
    <span style="color:#0000ee">
      <b><gm:text ref="atom:title"/></b><br/>
      <b><gm:html ref="atom:summary"/></b></span>
 <b><gm:link style="color:#ff0000;text-decoration:underline;font-size:110%;font-weight:bold;" label="Please click here to see the details鈥︹€? ref="atom:link[@rel='alternate']/@href"/></b><br/>
      <span style="color:#0000ee">
      Location's latitude: <gm:text ref="geo:lat"/><br/>
      Location's Longitude:<gm:text ref="geo:long"/>
      </span>
    
    </div>
  </gm:template>

</gm:page>



